<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="assetsManagementDetail">
		<uni-nav-bar :border="false" left-icon="calendar" right-icon="plus" @clickLeft="goToC" @clickRight="goToA">
			<view class="in-out" @click="selectAccountBookFn">
				<text class="title">{{accountBook.name}}</text>
				<uni-icons type="bottom" size="16"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="income-and-expenditure-statistics">
			<view class="header">
				<picker class="picker" mode="date" fields="month" :value="monthDate" :start="startDate" :end="endDate"
					@change="bindMonthDateChange">
					<text>{{monthDate}}</text>
					<uni-icons type="right" size="15"></uni-icons>
				</picker>
			</view>

			<!-- 		<view class="eye">
				<text></text>
				<uni-icons :type="eyeType" size="35" color="#fff" @click="eyeChange"></uni-icons>
			</view> -->
			<view class="current">
				<view>本月结余</view>
				<view class="income-and-expenditure-statistics-all-out">
					{{eyeChangeValue(monthIncomeAndExpense.income-monthIncomeAndExpense.expense)}}
				</view>
			</view>

			<text> 总支出 {{eyeChangeValue(monthIncomeAndExpense.expense)}}&emsp;|&emsp;总收入
				{{eyeChangeValue(monthIncomeAndExpense.income)}}</text>
		</view>
		<view class="title-and-add">
			<text>收支记录</text>

			<uni-search-bar class="search" cancelButton="false" @confirm="search" v-model="searchValue" @clear="clear">
			</uni-search-bar>

			<view class="new" @click="assetAcount">
				<text class="text">
					资产账户
				</text>
			</view>

		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<!-- 列表明细 -->
			<view v-for="i in detailList" @click="()=>goToDetail(i)">
				<view class="list-item">
					<view class="list-item-content">
						<uni-icons :type="i.icon || 'wallet'" size="35"></uni-icons>
						<view class="list-item-content-view">
							<view>{{i.type}}</view>
							<text>{{i.newDate}}</text>
						</view>
					</view>
					<view>
						<view :class=" moneyClass(i.money) ">
							{{( i.money.includes('-')? '':'+')+   eyeChangeValue(i.money)}}
						</view>

						<text class="category-name">{{i.categoryName}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<selectAccountBook :accountName="accountBook.name" ref="selectAccountBookRef"
		@selectAccountBookOk="selectAccountBookOk">
	</selectAccountBook>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { accountBookApi, calendarApi } from '@/apis/apis'
	import { onShow } from '@dcloudio/uni-app'
	import { getDate } from '@/utils'
	import { userStore } from '@/store/user'
	import selectAccountBook from '@/components/selectAccountBook/selectAccountBook.vue'
	const current = ref(0)
	const items = ref(['收入', '支出'])


	// 选择账本
	const selectAccountBookRef = ref(null)


	const selectAccountBookFn = () => {
		if (selectAccountBookRef.value) selectAccountBookRef.value.selectAccountBook()
	}
	const selectAccountBookOk = (value : any) => {
		accountBook.value = value

		getMonthIncomeAndExpenseRecords()

	}
	const searchValue = ref('')

	// 搜索
	const search = (e) => {
		console.log(e.value);
		getMonthIncomeAndExpenseRecords({ condition: e.value })
	}

	const clear = () => {
		getMonthIncomeAndExpenseRecords()
	}
	const cancel = () => {

	}

	const detailList = ref([/* {
		"id": "1879041888682455043",
		"type": "项资金",
		"money": "666.00",
		"newDate": "2025-02-15 00:00:00",
		"categoryName": "信用卡",
		"remarks": null
	} */
	])

	const accountBook = ref({
		name: '',
		id: '',

	})

	// 初始化请求账本
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({ defaulted: '1' })
		if (res.data.records[0]) {
			accountBook.value.name = res.data.records[0].name
			accountBook.value.id = res.data.records[0].id
			getMonthIncomeAndExpenseRecords()
		}
	}

	// 账本表-查询明细
	const getMonthIncomeAndExpenseRecords = async (params ?: {}) => {
		const res : any = await accountBookApi.queryPagesUsingGET({
			date: getDate('month'),
			accountBookId: accountBook.value.id,
			...params
		})
		detailList.value = res.data.records
	}


	const monthIncomeAndExpense = ref({
		income: 0,
		expense: 0
	})
	// 获取本月收支统计
	const getMonthIncomeAndExpense = async () => {
		const res : any = await calendarApi.queryUsingGET({ accountBookId: accountBook.value.id, date: getDate('month') })
		monthIncomeAndExpense.value = res.data
	}
	onShow(() => {
		getAccountBook()
		getMonthIncomeAndExpense()
	});


	// 资产账户
	const assetAcount = () => {
		uni.navigateTo({
			url: `/pages/assetsManagement/assetsManagement`
		})
	}

	const moneyClass = (money : string) => {
		return money.includes('-') ? 'green' : 'red'
	}

	const title = ref('')

	interface QueryParams {
		title ?: string
	}



	const eyeType = ref('eye')

	const eyeChange = () =>
		eyeType.value = eyeType.value === 'eye' ? 'eye-slash' : 'eye'

	const eyeChangeValue = (e : string) => eyeType.value === 'eye' ? e : "***"

	const goToC = () => {
		uni.navigateTo({ url: `/pages/calendarDetail/calendarDetail` })
	}

	const goToA = () => {
		uni.navigateTo({ url: `/pages/startKeepingAccounts/startKeepingAccounts` })
	}
	// 编辑
	const goToDetail = (i : any) => {
		uni.navigateTo({ url: `/pages/detail/details/details?type=${i.money.includes('-') ? 0 : 1}&id=${i.id}` })
	}



	const startDate = getDate('day', 'start')
	const endDate = getDate('day', 'end')
	const monthDate = ref(getDate('month'))
	const bindMonthDateChange = (e : any) => {
		monthDate.value = e.detail.value as string

		getMonthIncomeAndExpenseRecords({
			date: e.detail.value
		})
	}
	/* onLoad((query : QueryParams) => { // TypeScript 类型声明
		title.value = query.title
		console.log('参数:', query)
	}) */
</script>

<style lang="scss" scoped>
	$nav-height: 44px;


	.assetsManagementDetail {
		padding: 5px 20px 0;


		.in-out {
			width: 100px;
			height: $nav-height;
			margin: 0 auto;


			.title {
				font-size: 16px;
				line-height: $nav-height;
			}

			.uni-padding-wrap {

				padding: 0px 30px;
			}
		}

		// 收支统计
		.income-and-expenditure-statistics {
			margin: 0 auto 10px;
			padding: 15px;
			background-color: #c5ccd1;
			border-radius: 8px;

			.header {
				margin-bottom: 20px;
				align-items: center;

				.text {
					margin-left: 10px;
				}
			}

			.eye {
				display: flex;
				justify-content: space-between;
			}

			.current {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #acacac;
				padding-bottom: 10px;
				margin-bottom: 20px;

				.income-and-expenditure-statistics-all-out {
					font-size: 30px;
				}
			}

			.income-and-expenditure-statistics-header {
				margin-bottom: 20px;

				.income-and-expenditure-statistics-header-title {
					font-size: 22px;
				}
			}
		}

		.title-and-add {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 15px;

			.search {
				flex: 1;
			}

			.new {
				width: 125px;
				height: 34px;
				text-align: center;
				background-color: #000;
				color: rgba(255, 255, 255, 1);
				border-radius: 37px;

				.text {
					line-height: 34px;
				}
			}
		}


		.uni-list-view-container {
			height: 800px
		}

		// 明细列表
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #c6c6c6;

			.list-item-content {
				display: flex;
				align-items: center;

				.list-item-content-view {
					margin-left: 10px;
				}
			}

			.category-name {
				font-size: 13px;
				color: #464646;
			}
		}

		.scroll-Y {
			height: calc(100vh - 44px - 159px - 56px - 80px);
		}
	}
</style>